<template>
  <div>
    <el-dialog
      :title="param.id ? '编辑标签' : '新增标签'"
      :visible.sync="isShowModal"
      width="600px"
      :before-close="handleClose"
    >
      <el-form
        ref="ruleForm"
        class="doumee-form"
        :model="param"
        :rules="rules"
        label-width="100px"
        label-suffix="："
      >
        <el-form-item label="标签名称" prop="name">
          <el-input
            v-model="param.name"
            class="w400"
            type="text"
            placeholder="请输入,不超过30个字"
            maxlength="30"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowModal = false">取 消</el-button>
        <el-button
          v-preventReClick
          :loading="subLoading"
          type="primary"
          @click="onSubmit()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  memberTagAdd,
  memberTagEdit
} from '@/api'
export default {
  data() {
    return {
      subLoading: false,
      param: {},
      rules: {
        name: [
          { required: true, message: '请输入标签名称', trigger: 'blur' }
        ]
      },
      isShowModal: false
    }
  },
  mounted() {
  },
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const param = { ...this.param }
          this.subLoading = true
          const fn = param.id ? memberTagEdit : memberTagAdd
          fn({
            param
          }).then(res => {
            this.subLoading = false
            if (res.errorCode === '000000') {
              this.$message.success('提交成功')
              this.handleClose()
              this.$emit('success')
            }
          }).catch(err => {
            this.subLoading = false
            console.log(err)
          })
        }
      })
    },
    handleClose() {
      this.isShowModal = false
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

.device-uploader {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  cursor: pointer;
  border: 1px dashed #ccc;
  border-radius: 8px;
  transition: all 0.3s;
  margin-right: 20px;
  &:hover {
    border-color: $menuActive;
    .uploader-icon {
      color: $menuActive;
    }
  }
  ::v-deep .el-upload {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .file {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      .delete {
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: none;
        align-items: center;
        justify-content: center;
        .icon {
          color: #fff;
        }
      }
      &:hover {
        .delete {
          display: flex;
        }
      }
    }
  }
  .uploader-icon {
    color: #aaaaaa;
    font-size: 22px;
    transition: all 0.3s;
  }
}
.line-style {
  margin-bottom: 20px;
}
.device-uploaders {
  ::v-deep .el-upload-list__item {
    width: 80px;
    height: 80px;
  }
  ::v-deep .el-upload {
    width: 80px;
    height: 80px;
    line-height: 80px;
  }
}
</style>
